<template>
  <div class="vlonSingleColor" v-if="item">
    <span class="title">{{ item.title }}</span>
    <div class="right">
      <el-color-picker
        v-model="color"
        size="small"
        color-format="hex"
        :predefine="defaultPredefine"
        @change="pickerColorChange"
      ></el-color-picker>
      <el-input v-model="color16" size="small" minlength="6" maxlength="6" @blur="changeColorOnBlur">
        <template slot="prepend">#</template>
        <el-button slot="append" @click="resetColor">重置</el-button>
      </el-input>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "vlonSingleColor",
  data() {
    return {
      color: "",
      color16: "",
      default: "",
      defaultPredefine: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "#FFFFFF",
        "#000000",
      ],
      //为了防止页面初始化时，触发不必要的通知更新，此处设置标识符，初始化后2秒置为true
      needUpdate: false,
    };
  },
  created() {},
  props: ["item", "rightIndex", "catalogIndex","ocIndex", "id"],
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    setTimeout(() => {
      this.needUpdate = true;
    }, 1000);
  },
  methods: {
    init() {
      let oItem = null;
      this.color = null;
      this.color16 = null;
      if (this.item) {
        this.$nextTick(() => {
          oItem = JSON.parse(JSON.stringify(this.item));
          this.color = oItem.value;
          this.color16 = this.color.substr(1);
          this.default = oItem.default || this.color;
        });
      }
    },
    changeColorOnBlur(){
      if(this.color16.length==6){
        this.color = "#"+this.color16;
        this.setColorData(this.color);
      }else if(this.color16.length>0){
        this.$message.warning("输入有误，请重新输入");
        this.color16 = this.color.substr(1);
      }else if(this.color16.length===0){
        this.color = "";
        this.setColorData(this.color);
      }
    },
    pickerColorChange() {
      if (this.color) {
        this.color16 = String(this.color).substr(1).toUpperCase();
      } else {
        this.color = "";
        this.color16 = "";
      }
      this.setColorData(this.color);
    },
    resetColor() {
      this.color = this.item.default;
      this.color16 = this.color.substr(1);
      this.setColorData(this.color);
    },
    setColorData(color) {
      if (this.needUpdate) {
        //标识是否不需要更新Main中的组件
        let needUpdateMainChild = true;
        // if(this.item.ename === "pageName") {
        //   needUpdateMain = false;
        // }
        //更新给直属父级
        this.$emit(
          "updateParent",
          JSON.stringify({
            value: color,
            ename: this.item.ename,
            rightIndex: this.rightIndex,
            catalogIndex: this.catalogIndex,
            ocIndex: this.ocIndex,
            needUpdateMainChild: needUpdateMainChild,
            needUpdateMain: false,
          })
        );
      }
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.vlonSingleColor {
  display: flex;
  width: 100%;
  display: flex;
  align-items: center;
  .title {
    width: 100px;
    min-height: 32px;
    display: flex;
    justify-content: flex-end;
    font-size: 12px;
    align-items: center;
    padding-right: 10px;
  }
  .right {
    display: flex;
    align-items: center;
    flex: 1;
    width: calc(100% - 100px);
    .el-input {
      width: 165px;
      margin-left: 10px;
    }
  }
}
</style>
<style lang="scss">
.vlonSingleColor {
  .el-input-group__append,
  .el-input-group__prepend {
    padding: 0 10px;
  }
}
</style>
